<template>
    <view class="statistics-container">
        <PageHeader title="数据统计" />

        <view class="content-box">
            <!-- 地块选择 -->
            <view class="section-box">
                <view class="section-title">选择地块</view>
                <view class="land-grid">
                    <!-- 添加全部地块选项 -->
                    <view
                        class="land-item"
                        :class="{ active: !searchParams.plotId }"
                        @click="selectLand(null)">
                        <text class="land-name">全部地块</text>
                        <text class="land-area">{{ totalArea }}亩</text>
                    </view>
                    <view
                        v-for="(land, index) in lands"
                        :key="land.id"
                        :class="['land-item', { active: searchParams.plotId === land.id }]"
                        @click="selectLand(land.id)">
                        <text class="land-name">{{ land.name }}</text>
                        <text class="land-area">{{ land.area || '0亩' }}</text>
                    </view>
                </view>
            </view>

            <!-- 当前种植作物 -->
            <view class="section-box">
                <view class="section-title">当前种植作物</view>
                <view class="crop-info">
                    <view class="crop-row">
                        <text class="label">作物</text>
                        <text class="label">品种</text>
                        <text class="label">种植时间</text>
                    </view>
                    <view v-if="currentCrop" class="crop-row data-row">
                        <view class="crop-cell">
                            <view class="crop-icon">
                                <image src="/static/images/xiaomai.png"></image>
                            </view>
                            <text>{{ currentCrop.cropName || '暂无数据' }}</text>
                        </view>
                        <text class="crop-cell" style="color: #27c95d">{{ currentCrop.seedName || '暂无数据' }}</text>
                        <view class="crop-cell date">
                            <image src="/static/images/calendar-icon.png"></image>
                            <text>{{ formatPlantDate(currentCrop.startDate) }}</text>
                        </view>
                    </view>
                    <view v-else class="crop-row data-row">
                        <view class="crop-cell">
                            <text>暂无数据</text>
                        </view>
                        <text class="crop-cell">暂无数据</text>
                        <view class="crop-cell">
                            <text>暂无数据</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 生产统计 -->
            <view class="section-box">
                <view class="section-header">
                    <view class="section-title">
                        <view class="tab-group">
                            <view
                                class="tab-item"
                                :class="{ active: activeTab === 'production' }"
                                @click="activeTab = 'production'">
                                生产统计
                            </view>
                            <view
                                class="tab-item"
                                :class="{ active: activeTab === 'records' }"
                                @click="activeTab = 'records'">
                                农事记录
                            </view>
                        </view>
                    </view>
                    <view class="date-selector">
                        <view class="date-range">
                            <uni-datetime-picker
                                type="daterange"
                                v-model="dateRange"
                                @change="onDateRangeChange" />
                        </view>
                        <view class="time-select">
                            <uni-data-select
                                v-model="selectedTime"
                                :localdata="timeOptions"
                                @change="handleTimeSelect" />
                        </view>
                    </view>
                </view>

                <!-- 生产统计内容 -->
                <view v-if="activeTab === 'production'" class="production-content">
                    <!-- 这里放生产统计的具体内容 -->
                    <!-- 用种量统计 -->
                    <view class="section-box">
                        <view class="section-title">用种量统计</view>
                        <view class="stats-list">
                            <view
                                class="stats-item"
                                v-for="(item, index) in seedStats"
                                :key="index">
                                <text class="stats-name">{{ item.name }}</text>
                                <view class="stats-value">{{ item.value }}</view>
                            </view>
                            <view class="stats-item total">
                                <text class="stats-name">总计</text>
                                <view class="stats-value total-value">{{ totalSeed }}Kg</view>
                            </view>
                        </view>
                    </view>

                    <!-- 用药量统计 -->
                    <view class="section-box">
                        <view class="section-title">用药量统计</view>
                        <view class="stats-list">
                            <view
                                class="stats-item"
                                v-for="(item, index) in medicineStats"
                                :key="index">
                                <text class="stats-name">
                                    {{ item.name }}
                                    <text class="stats-type">{{ item.type }}</text>
                                </text>
                                <view class="stats-value">{{ item.value }}</view>
                            </view>
                            <view class="stats-item total">
                                <text class="stats-name">总计</text>
                                <view class="stats-value total-value">{{ totalMedicine }}Kg</view>
                            </view>
                        </view>
                    </view>

                    <!-- 用肥量统计 -->
                    <view class="section-box">
                        <view class="section-title">用肥量统计</view>
                        <view class="stats-list">
                            <view
                                class="stats-item"
                                v-for="(item, index) in fertilizerStats"
                                :key="index">
                                <text class="stats-name">{{ item.name }}</text>
                                <view class="stats-value">{{ item.value }}</view>
                            </view>
                            <view class="stats-item total">
                                <text class="stats-name">总计</text>
                                <view class="stats-value total-value">{{ totalFertilizer }}Kg</view>
                            </view>
                        </view>
                    </view>
                    
                    <!-- 用工统计 -->
                    <view class="section-box">
                        <view class="section-title">用工统计</view>
                        <view class="stats-list">
                            <view class="stats-item">
                                <text class="stats-name">用工人数</text>
                                <view class="stats-value">{{ workerCount }}人</view>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 农事记录内容 -->
                <view v-if="activeTab === 'records'" class="records-content">
                    <view class="farm-records">
                        <view class="record-item" v-for="(item, index) in farmingList" :key="index">
                            <view class="record-icon">
                                <!-- <image :src="item.icon"></image> -->
                                <image
                                    :src="AGRICULTURAL_WORK_TYPES_CHART[item?.agriculturalWork]"
                                    mode="aspectFill"></image>
                            </view>
                            <view class="record-content">
                                <view class="record-title">
                                    {{ getWorkTypeLabel(item.agriculturalWork) }}
                                </view>
                                <view class="record-desc">{{ item.remark }}</view>
                            </view>
                            <text class="record-time">{{ item.time }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 时间选择器弹出层 -->
        <uni-popup ref="timeSelector" type="bottom" @change="onPopupChange">
            <view class="time-selector-popup">
                <view class="popup-header">
                    <text>选择时间范围</text>
                    <view class="close-btn" @click="showTimeSelector = false">关闭</view>
                </view>
                <view class="popup-content">
                    <view
                        v-for="option in timeOptions"
                        :key="option.value"
                        class="time-option"
                        :class="{ active: selectedTime === option.value }"
                        @click="handleTimeSelect(option.value)">
                        {{ option.text }}
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import PageHeader from '@/components/PageHeader/index.vue'
import { land } from '@/utils/api/index.js'
import { getMyTaskList, getMyDataStatistics,getMyDataStatisticsSeed } from '@/utils/api/myTask.js'

import { formatDateChinese, formatDateEn, formatImages } from '@/utils/util.js'
import { mapGetters, mapActions } from 'vuex'
import {
    TASK_STATUS,
    TASK_STATUS_CLASS,
    AGRICULTURAL_WORK_TYPES_CHART,
    AGRICULTURAL_WORK_TYPES,
    getDictText,
    STATUS_DICT,
} from '@/utils/dict.js'

export default {
    components: {
        PageHeader,
    },

    data() {
        return {
            TASK_STATUS,
            TASK_STATUS_CLASS,
            AGRICULTURAL_WORK_TYPES_CHART,
            lands: [], // 修改为空数组，将通过接口获取数据
            activeTab: 'production',
            dateRange: [],
            selectedTime: null,
            searchParams: {
                plotId: null,
                startDate: '',
                endDate: '',
            },
            timeOptions: [
                { value: 0, text: '本月' },
                { value: 1, text: '本年' },
            ],
            seedStats: [
                { name: '郑麦366', value: '800Kg' },
                { name: '周麦27', value: '800Kg' },
            ],
            medicineStats: [
                { name: '敌敌畏', type: '除草剂', value: '80Kg' },
                { name: '多菌灵', type: '除草剂', value: '80Kg' },
            ],
            fertilizerStats: [
                { name: '尿素', value: '80Kg' },
                { name: '复合肥', value: '80Kg' },
            ],
            workerCount: '0', // 用工人数
            farmingList: [],
            farmRecords: [
                {
                    type: 'seeding',
                    title: '播种作业',
                    description: '使用播种机完成120亩冬小麦播种',
                    time: '12:22:33',
                    icon: '/static/images/icons/bozhong-icon.png',
                },
                {
                    type: 'irrigation',
                    title: '灌溉作业',
                    description: '完成土地灌溉60亩',
                    time: '12:22:33',
                    icon: '/static/images/icons/guangai-icon.png',
                },
                {
                    type: 'irrigation',
                    title: '植保',
                    description: '完成土地灌溉60亩',
                    time: '12:22:33',
                    icon: '/static/images/icons/zhibao-icon.png',
                },
                {
                    type: 'fertilizer',
                    title: '施肥作业',
                    description: '完成土地施肥作业',
                    time: '12:22:33',
                    icon: '/static/images/icons/shifei-icon.png',
                },
                {
                    type: 'medicine',
                    title: '土地整备',
                    description: '完成土地整备作业',
                    time: '12:22:33',
                    icon: '/static/images/icons/zhengbei-icon.png',
                },
            ],
            currentCrop: null, // 当前种植作物信息
        }
    },
    computed: {
        totalSeed() {
            // 计算所有种子用量总和
            let total = 0
            this.seedStats.forEach(item => {
                // 从值中提取数字部分
                const numValue = parseFloat(String(item.value).replace(/[^0-9.]/g, '')) || 0
                total += numValue
            })
            return total.toFixed(2)
        },
        totalMedicine() {
            // 计算所有农药用量总和
            let total = 0
            this.medicineStats.forEach(item => {
                // 从值中提取数字部分，去掉单位
                const numValue = parseFloat(String(item.value).replace(/[^0-9.]/g, '')) || 0
                total += numValue
            })
            return total.toFixed(2)
        },
        totalFertilizer() {
            // 计算所有肥料用量总和
            let total = 0
            this.fertilizerStats.forEach(item => {
                // 从值中提取数字部分
                const numValue = parseFloat(String(item.value).replace(/[^0-9.]/g, '')) || 0
                total += numValue
            })
            return total.toFixed(2)
        },
        totalArea() {
            // 计算所有地块总面积总和
            let total = 0
            this.lands.forEach(land => {
                const areaValue = parseFloat(String(land.area).replace(/[^0-9.]/g, '')) || 0
                total += areaValue
            })
            return total.toFixed(2)
        }
    },
    async onShow() {
        await this.fetchParcels()
        this.fetchFarmingList()
        this.fetchStatisticsData()
        this.fetchCurrentCrop() // 获取当前种植作物数据
    },
    methods: {
        // 获取地块数据
        async fetchParcels() {
            try {
                uni.showLoading({ title: '加载地块数据...' })
                const res = await land.getAllParcelAndFields()

                if (res.code === 0 && res.data && res.data.length > 0) {
                    // 格式化API返回的数据
                    this.lands = res.data.map((parcel) => {
                        // 计算地块总面积（使用contractArea的总和）
                        const totalArea =
                            parcel.listField?.reduce((sum, field) => {
                                return sum + (field.contractArea || 0)
                            }, 0) || 0

                        return {
                            id: parcel.id,
                            name: parcel.parcelName,
                            // 保留两位小数
                            area: `${totalArea.toFixed(2)}亩`,
                            selected: false,
                        }
                    })
                    // this.searchParams.plotId = this.lands[0].id
                   
                } else {
                    // 使用默认数据作为备选
                    this.initDefaultData()
                }
                uni.hideLoading()
            } catch (error) {
                console.error('获取地块数据失败', error)
                uni.hideLoading()
                uni.showToast({
                    title: '获取地块数据失败',
                    icon: 'none',
                })
                // 使用默认数据作为备选
                this.initDefaultData()
            }
        },

        initDefaultData() {
            // 默认数据，当API请求失败时使用
            this.lands = [
                {
                    id: null,
                    name: '空地块',
                    area: '0亩',
                    selected: false,
                },
            ]
        },

        selectLand(id) {
            // 更新搜索参数中的地块ID
            this.searchParams.plotId = id // 当id为null时表示选择全部地块

            // 这里可以触发其他相关数据的更新
            this.fetchFarmingList()
            this.fetchStatisticsData()
            this.fetchCurrentCrop() // 更新当前种植作物数据
        },
        async fetchFarmingList() {
            try {
                this.loading = true
                uni.showLoading({ title: '加载中...' })

                // 过滤掉空的搜索条件
                const params = {}
                Object.keys(this.searchParams).forEach(key => {
                    if (this.searchParams[key] !== null && this.searchParams[key] !== '') {
                        params[key] = this.searchParams[key]
                    }
                })

                const res = await getMyTaskList(params)

                if (res.code === 0 && res.data) {
                    let resList = res.data.list || []
                    let allList = resList.map((item) => {
                        let associatedData = {}
                        if (item.associatedData) {
                            associatedData = JSON.parse(item.associatedData)
                        }
                        return {
                            ...item,
                            ...associatedData,
                        }
                    })
                    this.farmingList = allList
                }
            } catch (error) {
                console.error('获取农事记录失败:', error)
                uni.showToast({
                    title: '获取数据失败',
                    icon: 'none',
                })
                this.farmingList = this.getDefaultData()
            } finally {
                this.loading = false
                uni.hideLoading()
                uni.stopPullDownRefresh()
            }
        },
        onDateRangeChange(e) {
            console.log('日期范围变化：', e)
            // 更新搜索参数中的日期范围
            if (e && e.length === 2) {
                this.searchParams.startDate = e[0]
                this.searchParams.endDate = e[1]
                // 触发搜索
                this.fetchFarmingList()
                this.fetchStatisticsData()
                
                
            }
        },

        handleTimeSelect(value) {
            const now = new Date()
            let startDate, endDate

            if (value === 0) {
                // 本月
                startDate = new Date(now.getFullYear(), now.getMonth(), 1)
                endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0)
            } else if (value === 1) {
                // 本年
                startDate = new Date(now.getFullYear(), 0, 1)
                endDate = new Date(now.getFullYear(), 11, 31)
            }

            // 更新日期范围
            this.dateRange = [this.formatDate(startDate), this.formatDate(endDate)]

            // 更新搜索参数
            this.searchParams.startDate = this.formatDate(startDate)
            this.searchParams.endDate = this.formatDate(endDate)

            // 调用搜索接口
            this.fetchFarmingList()
            this.fetchStatisticsData()
        },

        formatDate(date) {
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            return `${year}-${month}-${day}`
        },
        /**
         * 统计接口-getMyDataStatistics
         */
        async fetchStatisticsData() {
            try {
                uni.showLoading({ title: '加载统计数据...' })
                
                // 过滤掉空的搜索条件
                const params = {}
                Object.keys(this.searchParams).forEach(key => {
                    if (this.searchParams[key] !== null && this.searchParams[key] !== '') {
                        params[key] = this.searchParams[key]
                    }
                })
                
                const res = await getMyDataStatistics(params)
                
                if (res.code === 0 && res.data) {
                    if (this.searchParams.plotId) {
                        // 如果选择了特定地块，只显示该地块的数据
                        const currentPlotData = res.data.find(item => item.parcelId === String(this.searchParams.plotId))
                        
                        if (currentPlotData) {
                            // 处理用种量统计数据
                            this.seedStats = currentPlotData.listSowingManagementVO.map(item => ({
                                name: item.seedName || '未知种子',
                                value: `${item.seedDosage || 0}Kg`
                            })) || []
                            
                            // 处理用肥量统计数据
                            this.fertilizerStats = currentPlotData.listFertilizationManagementVo?.map(item => ({
                                name: item.fertilizerName || '未知肥料',
                                value: `${item.dosage || 0}Kg`
                            })) || []
                            
                            // 处理用药量统计数据
                            this.medicineStats = currentPlotData.listPlantProtectionSubtableVo?.map(item => ({
                                name: item.pesticideName || '未知农药',
                                type: '农药',
                                value: `${item.dosage || 0}${item.dosageUnit || 'Kg'}`
                            })) || []
                            
                            // 处理用工统计数据
                            this.workerCount = Math.round(currentPlotData.workerCount) || '0'
                        } else {
                            // 如果没有找到当前地块的数据，使用默认数据
                            this.resetStatisticsData()
                        }
                    } else {
                        // 如果没有选择地块，直接使用"全部地块"的统计数据
                        const allPlotsData = res.data.find(item => item.parcelName === '全部地块')
                        
                        if (allPlotsData) {
                            // 处理用种量统计数据
                            this.seedStats = allPlotsData.listSowingManagementVO?.map(item => ({
                                name: item.seedName || '未知种子',
                                value: `${item.seedDosage || 0}Kg`
                            })) || []
                            
                            // 处理用肥量统计数据
                            this.fertilizerStats = allPlotsData.listFertilizationManagementVo?.map(item => ({
                                name: item.fertilizerName || '未知肥料',
                                value: `${item.dosage || 0}Kg`
                            })) || []
                            
                            // 处理用药量统计数据
                            this.medicineStats = allPlotsData.listPlantProtectionSubtableVo?.map(item => ({
                                name: item.pesticideName || '未知农药',
                                type: '农药',
                                value: `${item.dosage || 0}${item.dosageUnit || 'Kg'}`
                            })) || []
                            
                            // 处理用工统计数据
                            this.workerCount = Math.round(allPlotsData.workerCount) || '0'
                        } else {
                            // 如果没有找到"全部地块"的数据，使用默认数据
                            this.resetStatisticsData()
                        }
                    }
                    
                    // 更新计算属性的依赖数据
                    this.$forceUpdate();
                } else {
                    this.resetStatisticsData()
                }
                uni.hideLoading()
            } catch (error) {
                console.error('获取统计数据失败:', error)
                uni.hideLoading()
                uni.showToast({
                    title: '获取统计数据失败',
                    icon: 'none'
                })
                this.resetStatisticsData()
            }
        },
        
        // 重置统计数据为默认值
        resetStatisticsData() {
            this.seedStats = []
            this.fertilizerStats = []
            this.medicineStats = []
            this.workerCount = '0'
        },

        // 获取当前种植作物数据
        async fetchCurrentCrop() {
            try {
                uni.showLoading({ title: '加载作物数据...' })
                
                // 过滤掉空的搜索条件
                const params = {}
                Object.keys(this.searchParams).forEach(key => {
                    if (this.searchParams[key] !== null && this.searchParams[key] !== '') {
                        params[key] = this.searchParams[key]
                    }
                })
                
                const res = await getMyDataStatisticsSeed(params)
                
                if (res.code === 0 && res.data) {
                    let cropData = null
                    
                    if (this.searchParams.plotId) {
                        // 如果选择了特定地块，只显示该地块的数据
                        const plotData = res.data.find(item => item.parcelId === String(this.searchParams.plotId))
                        
                        if (plotData && plotData.listSowingManagementVO && plotData.listSowingManagementVO.length > 0) {
                            cropData = plotData.listSowingManagementVO[0] // 取第一条作物数据
                        }
                    } else {
                        // 如果没有选择地块，显示全部地块的数据
                        const allPlotsData = res.data.find(item => item.parcelName === '全部地块')
                        
                        if (allPlotsData && allPlotsData.listSowingManagementVO && allPlotsData.listSowingManagementVO.length > 0) {
                            cropData = allPlotsData.listSowingManagementVO[0] // 取第一条作物数据
                        }
                    }
                    
                    this.currentCrop = cropData
                } else {
                    this.currentCrop = null
                }
                
                uni.hideLoading()
            } catch (error) {
                console.error('获取当前种植作物数据失败:', error)
                uni.hideLoading()
                uni.showToast({
                    title: '获取作物数据失败',
                    icon: 'none'
                })
                this.currentCrop = null
            }
        },
        
        // 格式化种植日期
        formatPlantDate(dateArray) {
            if (!dateArray || !Array.isArray(dateArray) || dateArray.length < 3) {
                return '暂无数据'
            }
            
            const [year, month, day] = dateArray
            return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
        },

        getRecordIcon(type) {
            const icons = {
                seeding: '/static/images/icons/seed.png',
                irrigation: '/static/images/icons/irrigation.png',
                fertilizer: '/static/images/icons/fertilizer.png',
                medicine: '/static/images/icons/protection.png',
            }
            return icons[type] || '/static/images/icons/calendar.png'
        },
        getWorkTypeLabel(value) {
            if (!value) return '未指定'
            return getDictText(AGRICULTURAL_WORK_TYPES, value, value)
        },
    },
}
</script>

<style lang="scss" scoped>
.statistics-container {
    min-height: 100vh;
    background-color: #f5f5f5;
}

.content-box {
    padding: 20rpx;
}

.section-box {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
}

.section-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 20rpx;
}

.tab-group {
    display: flex;
    margin-bottom: 20rpx;

    border-radius: 8rpx;
    padding: 6rpx;
}

.tab-item {
    padding: 10rpx 20rpx;
    font-size: 28rpx;
    color: #999;
    margin-right: 20rpx;
    cursor: pointer;
    border-radius: 6rpx;
    text-align: center;
    background: rgba(227, 227, 227, 0.35);

    &.active {
        color: #fff;
        background: #2d6040;
    }
}

// 地块选择
.land-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10rpx;

    .land-item {
        width: calc(25% - 20rpx);
        padding: 34rpx 0;
        margin: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        cursor: pointer;

        .land-name {
            margin-bottom: 8rpx;

            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 24rpx;
            color: rgba(51, 51, 51, 0.8);
        }

        .land-area {
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
        }

        &.active {
            background-color: #2d6040;
            .land-name {
                color: #fff;
            }

            .land-area {
                color: #fff;
            }
        }
    }
}

// 当前种植作物
.crop-info {
    .crop-row {
        display: flex;
        padding: 20rpx 0;
        border-bottom: 1px solid #f0f0f0;

        &.data-row {
            border-bottom: none;
        }

        .label {
            flex: 1;
            font-size: 28rpx;
            color: #999;
            text-align: center;
        }

        .crop-cell {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            color: #333;

            &.date {
                color: #2d6040;

                image {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 8rpx;
                }
            }

            .crop-icon {
                width: 40rpx;
                height: 40rpx;
                // background-color: #ffc107;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 10rpx;

                image {
                    width: 40rpx;
                    height: 40rpx;
                }
            }
        }
    }
}

// 日期选择器
.date-selector {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .date-range {
        flex: 1;
        display: flex;
        align-items: center;

        .date-item {
            display: flex;
            align-items: center;
            background-color: #f5f5f5;
            padding: 10rpx 20rpx;
            border-radius: 8rpx;

            image {
                width: 32rpx;
                height: 32rpx;
                margin-right: 8rpx;
            }

            text {
                font-size: 26rpx;
                color: #333;
            }
        }

        .date-separator {
            margin: 0 15rpx;
            color: #999;
        }
    }

    .month-selector {
        flex: 1;
        display: flex;
        align-items: center;
        background-color: #f5f5f5;
        padding: 10rpx 20rpx;
        border-radius: 8rpx;

        text {
            font-size: 26rpx;
            color: #333;
            margin-right: 8rpx;
        }

        image {
            width: 24rpx;
            height: 24rpx;
        }
    }
}

// 统计列表
.stats-list {
    .stats-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1px solid #f0f0f0;

        &.total {
            border-bottom: none;
            margin-top: 10rpx;
        }

        .stats-name {
            font-size: 28rpx;
            color: #333;

            .stats-type {
                font-size: 24rpx;
                color: #999;
                margin-left: 10rpx;
            }
        }

        .stats-value {
            font-size: 28rpx;
            color: #4cd964;
            background-color: rgba(76, 217, 100, 0.1);
            padding: 6rpx 20rpx;
            border-radius: 30rpx;

            &.total-value {
                font-size: 32rpx;
                font-weight: 500;
            }
        }
    }
}

// 农事记录
.farm-records {
    .record-item {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1px solid #f0f0f0;

        .record-icon {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20rpx;

            image {
                width: 40rpx;
                height: 40rpx;
            }
        }

        .record-content {
            flex: 1;

            .record-title {
                font-size: 28rpx;
                color: #333;
                font-weight: 500;
                display: block;
                margin-bottom: 5rpx;
            }

            .record-desc {
                width: 100%;
                padding: 16rpx;
                font-family: OPPOSans, OPPOSans;
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                background: rgba(244, 244, 244, 1);
            }
        }

        .record-time {
            font-size: 24rpx;
            color: #999;
        }
    }
}

.load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx 0;
    color: #999;
    font-size: 26rpx;

    image {
        width: 24rpx;
        height: 24rpx;
        margin-left: 8rpx;
    }
}

// 时间选择器弹出层样式
.time-selector-popup {
    background-color: #fff;
    border-radius: 24rpx 24rpx 0 0;
    padding: 30rpx;

    .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
        border-bottom: 1px solid #f0f0f0;

        text {
            font-size: 32rpx;
            font-weight: 500;
            color: #333;
        }

        .close-btn {
            font-size: 28rpx;
            color: #999;
            padding: 10rpx;
        }
    }

    .popup-content {
        padding: 20rpx 0;

        .time-option {
            padding: 20rpx 0;
            font-size: 28rpx;
            color: #333;
            text-align: center;

            &.active {
                color: #2d6040;
                font-weight: 500;
            }
        }
    }
}

// 修改日期选择器样式
.date-selector {
    display: flex;
    align-items: center;
    gap: 20rpx;

    .date-range {
        flex: 1;
    }

    .time-select {
        width: 160rpx;

        :deep(.uni-data-select) {
            .uni-select--mask {
                background-color: transparent;
            }

            .uni-select__input-box {
                background-color: #f5f5f5;
                border: none;
                height: 70rpx;
            }
        }
    }
}
</style>
